<!--
 * @Author: DESKTOP-05FP536\Administrator 18368095041@163.com
 * @Date: 2025-01-12 20:10:52
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2025-02-06 08:12:47
 * @FilePath: /vue3-admin/src/views/template/GanttView/MapSelect/MapSelect.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import {
    selectMapPoint,
    selectMapPolyline,
    selectMapPolygon
} from '@/views/common/IframeView/helpers/v6.0.6';

const point = ref<{ lng?: number; lat?: number }>({
    lng: 109.13789599203491,
    lat: 21.45834694442749
});

const handleSelectPoint = () => {
    selectMapPoint(
        'single',
        point.value.lng ? JSON.stringify([point.value]) : undefined
    ).then((res) => {
        if (res) {
            point.value.lng = res.data.points[0].lng;
            point.value.lat = res.data.points[0].lat;
        }
    });
};

const polyline = ref(
    '{"line":[{"lng":109.13053601049805,"lat":21.45435581741333},{"lng":109.13783161901856,"lat":21.450450521087646},{"lng":109.14624302648926,"lat":21.455471616363525},{"lng":109.1448268201294,"lat":21.463024716949466}]}'
);

const handleSelectPolyline = () => {
    selectMapPolyline(
        'single',
        polyline.value
            ? JSON.stringify([JSON.parse(polyline.value)])
            : undefined
    ).then((res) => {
        if (res) {
            console.log(res);
            if (res) {
                polyline.value = JSON.stringify({
                    line: res.data.polylines[0].polyline.map((point) => {
                        return {
                            lng: point.lng,
                            lat: point.lat
                        };
                    })
                });
            }
        }
    });
};

const polygon = ref(
    '{"polygon":[{"lng":109.12832587026978,"lat":21.457746129608154},{"lng":109.13184492849732,"lat":21.449549298858642},{"lng":109.13892596029663,"lat":21.452252965545654},{"lng":109.15115683340454,"lat":21.456973653411865},{"lng":109.14459078573609,"lat":21.461522679901123},{"lng":109.1472944524231,"lat":21.467402082061767}]}'
);

const handleSelectPolygon = () => {
    selectMapPolygon(
        'single',
        polygon.value ? JSON.stringify([JSON.parse(polygon.value)]) : undefined
    ).then((res) => {
        if (res) {
            console.log(res);
            if (res) {
                polygon.value = JSON.stringify({
                    polygon: res.data.polygons[0].polygon.map((point) => {
                        return {
                            lng: point.lng,
                            lat: point.lat
                        };
                    })
                });
            }
        }
    });
};
</script>

<template>
    <div class="page-container">
        <CustomCard title="" :canCollapse="false">
            <el-form>
                <el-row>
                    <el-form-item label="选择坐标">
                        <div class="flex flex-row mr-[10px]">
                            lng：<el-input
                                v-model.number="point.lng"
                                class="mr-[10px]"
                            />
                            lat：
                            <el-input v-model.number="point.lat" />
                        </div>
                        <el-button
                            type="primary"
                            @click.stop="handleSelectPoint"
                            >去选择</el-button
                        >
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :col="24">
                        <el-form-item label="选择多变线">
                            <el-input
                                v-model="polyline"
                                type="textarea"
                                class="mb-[10px]"
                            />
                            <el-button
                                type="primary"
                                @click.stop="handleSelectPolyline"
                                >去选择</el-button
                            >
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :col="24">
                        <el-form-item label="选择多边形">
                            <el-input
                                v-model="polygon"
                                type="textarea"
                                class="mb-[10px]"
                            />
                            <el-button
                                type="primary"
                                @click.stop="handleSelectPolygon"
                                >去选择</el-button
                            >
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </CustomCard>
    </div>
</template>
